<template>
	<view class="pb">
		<image src="https://xinzhu-1301398555.cos.ap-shanghai.myqcloud.com/wxapp/vip/vip-nav.png" class="image" mode="widthFix"></image>
		<!-- <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#FFD101"></uni-segmented-control> -->
		<view class="nav text-center">
			<uni-row>
				<uni-col :span="12">
					<view class="tab-0" @click="onClickItem(0)">
						<view :class="current == 0 ? 'tab-line-select' : 'tab-line'">{{infoData[0].title}}</view>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view class="tab-1" @click="onClickItem(1)">
						<view :class="current == 1 ? 'tab-line-select' : 'tab-line'">{{infoData[1].title}}</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="p0-15">
			<view v-for="(item,index) in infoData" :key="index" v-show="current === index">
				<image :src="item.img" class="image" mode="widthFix"></image>
			</view>
		</view>
		<view class="fixed-bottom">
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="shop">
					<uni-list :border="false">
						<uni-list-chat :avatar-circle="true" :title="infoUser.name" :avatar="infoUser.head_img" :note="due_date" ></uni-list-chat>
					</uni-list>
					<uni-card padding="0" spacing="0">
						<template v-slot:cover>
							<view class="p15">
								<uni-title type="h3" :title="' 订单：'+infoData[current].title"></uni-title>
							</view>
						</template>
						<uni-list>
							<uni-list-item :title="'订单金额：' + infoData[current].price"></uni-list-item>
							<uni-list-item :title="'需要支付：' + infoData[current].price"></uni-list-item>
						</uni-list>
					</uni-card>
					<view class="p15 text-center"><button class="default-button-push" @click="onPay">立即支付</button></view>
				</view>
			</uni-popup>
			<uni-goods-nav v-if="!showPay" :fill="true" :options="options" :button-group="customButtonGroup" @click="onClickOption" @buttonClick="buttonClick" />
		</view>
		<uni-popup ref="popupCustomer" background-color="none">
			<customerVue></customerVue>
		</uni-popup>
	</view>
</template>

<script>
	import customerVue from '../../components/customer.vue'
	export default {
		components: {
			customerVue
		},
		data() {
			return {
				form:{},
				current: 0,
				items:['会员vip','会员vvip'],
				infoData:[{price:0,title:'套餐一'}],
				infoUser:{name:'',head_img:'',time:''},
				due_date:'',
				
				options: [{
					icon: 'paperplane',
					text: '咨询',
					type:'customer',
				}],
				customButtonGroup: [
					{ icon: 'shop',text: '立即支付', backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)', color: '#333' },
				],
				showPay:false
			}
		},
		onShow() {
			// https://xinzhu-1301398555.cos.ap-shanghai.myqcloud.com/wxapp/vip.png
			this.onGetData()
		},
		methods: {
			onPay(){
				let _this = this
				this.$request_api('applet_api/pay/vip','POST',{id:this.infoData[this.current].id}).then(res => {
					// if(res.code == 201){
					// 	uni.showToast({ title: res.msg, duration: 2000 })
					// 	this.$refs.popup.close()
					// 	return;
					// }
					if(res.code != 200){
						uni.showToast({ title: res.msg, duration: 2000 })
						return
					}
					let paymentData = res.data;
					wx.requestPayment({
						nonceStr:paymentData.nonceStr,
						package: paymentData.package,
						paySign: paymentData.paySign,
						timeStamp: paymentData.timeStamp,
						signType:paymentData.signType,
					})
					this.$refs.popup.close()
					_this.isPay(res.numbers)
				}).catch(err => {
					console.log(err)
				})
			},
			isPay(numbers){
				let _this = this
				this.$request_api('applet_api/pay_status','POST',{numbers:numbers}).then(res => {
					if(res.data){
						return
					}
					setTimeout(() => {_this.isPay(numbers)}, 3000);
				}).catch(err => {
					console.log(err)
				})
			},
			onGetData(){
				let _this = this
				this.$request_api('applet_api/vip','POST',this.form).then(res => {
					_this.infoData = res.data
					_this.customButtonGroup[0].text = _this.infoData[this.current].price + ' 立即支付'
				}).catch(err => {
					console.log(err)
				})
			},
			onGetUser(){
				let _this = this
				this.$request_api('applet_api/user','POST',this.form).then(res => {
					_this.infoUser = res.data
					_this.due_date = _this.infoUser.vip[_this.current].due_date ? '当前套餐到期时间：' + _this.infoUser.vip[_this.current].due_date : '未成为会员'
				}).catch(err => {
					console.log(err)
				})
			},
			onClickItem(e){
				this.current = e
				this.customButtonGroup[0].text = this.infoData[this.current].price + ' 立即支付'
			},
			onClickOption(e){
				if(e.content.type == 'customer'){
					this.$refs.popupCustomer.open('center')
				}
			},
			buttonClick(e) {
				this.$refs.popup.open('bottom')
				this.onGetUser()
			},
			change(event){
				this.showPay = event.show
			},
			onLink(url,id){
				uni.navigateTo({
					url: "/pages/study/"+url+"?id="+id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.pb{background-image: url('https://xinzhu-1301398555.cos.ap-shanghai.myqcloud.com/wxapp/vip/vip-bg.png');background-repeat: no-repeat;background-size: 100% 100%;}
.image{border-radius: 10px;}
.shop{padding: 15px 15px 60px 15px;}

.nav{padding: 0px 15px}
.tab-0{color: #fe6623;padding: 12px 0px;background-color: #fef6e9;padding: 12px 32px 16px 32px;border-top-left-radius: 8px;position: relative;top: 4px;}
.tab-1{color: #fe6623;padding: 12px 0px;background-color: #efc98b;padding: 12px 32px 16px 32px;border-top-right-radius: 8px;position: relative;top: 4px;}
.tab-line-select{border-bottom: 2px solid #fe6623;padding-bottom: 12px;}
.tab-line{padding-bottom: 12px;}
</style>
